<template>
  <v-layout type="main">
    <!-- <p class="page-title">模型测试</p> -->
    <!-- <div class="detail-box" v-if="!$route.meta.hideDetails"> -->
    <!-- <div class="pic">
        <img src="@/assets/img/test-pic.png" alt="">
      </div> -->
    <!-- <div class="word" v-if="detailData">
        <h3 class="title"> -->
    <!-- {{detailData.alias}} -->
    <!-- <i class="el-icon-edit-outline alick-btn-edit" @click="updateBase" /> -->
    <!-- <span>状态：<strong :class="['alick-layout-status', detailData.status]">{{
          statusMap[detailData.status]}}</strong></span> -->
    <!-- <el-button class="back" type="text" icon="el-icon-right" @click="$router.push({ path: '/gameModelTest' })" />
        </h3>
        <p class="hint">{{ detailData.desc }}</p>
        <div class="alick-handle-btns">
          <a class="handle-btn" href="javascript:;" @click="start" v-show="detailData.status == 'terminated'">启动</a>
          <a class="handle-btn" href="javascript:;" @click="goToLink" v-show="detailData.status == 'running'">打开仿真前端</a>
          <a class="handle-btn" href="javascript:;" @click="stop" v-show="detailData.status != 'terminated'">停止</a>
        </div>
      </div>
    </div> -->

    <div class="layout-top">
      <div class="rollback" @click="$router.push('/gameModelTest')">
        <img src="~@/assets/img/prev.png" alt="">
        <span>返回</span>
      </div>

      <div class="code-description">
        <div class="dea_top">
          <div>
            <el-image class="nav_box" :src="detailData.avatar ? detailData.avatar : require('@/assets/img/drone3.jpg')" fit="fit"></el-image>
          </div>

          <div class="header_box">
            <div class="code-desc-header">
              <div class="title">
                <div class="title-header">
                  <span>{{ detailData.name }}</span>
                </div>

                <div class="code-tags">
                  <div class="user-tag tag">
                    <img src="~@/assets/img/user.png" alt="">
                    {{
                      detailData.create_user && (detailData.create_user.nick_name ||
                        detailData.create_user.username)
                    }}
                  </div>

                  <div :class="['status-tag tag', {
                        'danger': detailData.status === 'terminated',
                        'warning': detailData.status != 'terminated' && detailData.status != 'running',
                        'success': detailData.status === 'running'
                      }]">
                    {{ statusMap[detailData.status] }}
                  </div>


                  <div class="time-tag tag">
                    <span>创建时间：</span>
                    {{ detailData.create_time }}
                  </div>

                </div>

                <div class="staet_box">
                  <plug-state :statusStr="detailData.status" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="btns-container">
        <div class="alick-handle-btns">
          <el-button class="handle-btn" type="success" size="medium" @click="start"
            v-show="detailData.status == 'terminated'">
            启动
          </el-button>
          <el-button class="handle-btn" type="primary" size="medium" @click="goToLink"
            v-show="detailData.status == 'running'">
            打开仿真前端
          </el-button>
          <el-button class="handle-btn" type="danger" size="medium" @click="stop"
            v-show="detailData.status != 'terminated'">
            停止
          </el-button>
        </div>
      </div>
    </div>

    <!-- <el-radio-group v-model="nowRouter" size="medium" @change="skip" class="nav-alike" v-show="!$route.meta.hideDetails">
      <el-radio-button :label="e.name" v-for="(e, i) in thisRouter" :key="i">
        <span class="nav-alike-item">{{ e.meta.title }}</span>
      </el-radio-button>
    </el-radio-group> -->

    <el-tabs v-model="nowRouter" @tab-click="skip">
      <el-tab-pane :label="e.meta.title" :name="e.name" v-for="(e, i) in thisRouter" :key="i" />
    </el-tabs>

    <div :class="['layout-content', { 'layout-content-nodetail': $route.meta.hideDetails }]">
      <router-view class="content-detail" :detailData="detailData" v-if="detailData" @getDetail="getDetail" />
    </div>

    <!-- <el-dialog :visible.sync="showUpdateBaseDialog" title="模型测试基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="taskForm" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="taskForm.name" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="taskForm.desc" />
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitBase">确定</el-button>
          <el-button class="none-type" @click="cancelBase">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->
  </v-layout>
</template>

<script>
import plugState from '@/components/module/plug-state'
import { startGameTaskVersion, stopGameTaskVersion } from "@/api/gameTask"
import { getGameDeployDetail } from '@/api/gameDeploy'
export default {
  data() {
    return {
      nowRouter: this.$route.name,
      thisRouter: [],
      detailData: null,
      // detailData: { name: "tftest01", create_user: { nick_name: "admin" }, resource: { start_time: '2023-09-08 15:23:10' }, update_time: '2023-09-08 15:23:10', status: 'terminated' },
      taskForm: {},
      // submitRules: {
      //   name: [
      //     { required: true, message: "该项为必填项" },
      //     { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
      //   ],
      //   desc: [
      //     { required: true, message: "该项为必填项" },
      //     { required: true, min: 1, max: 200, message: "长度在1到40个字符" },
      //   ],
      // },
      showUpdateBaseDialog: false,
      task: null,
      model: null,
      algorithm: null,
      podUrl: null
    };
  },
  methods: {
    skip() {
      let path = `/gameModelTest/${this.thisRouter.filter(e => e.name == this.nowRouter)[0].path}`
      if (path == this.$route.path) return
      this.$router.push({
        path,
        query: {
          id: this.$route.query.id
        }
      })
    },
    async getDetail() {
      if (!this.$route.query.id) return
      let res = await getGameDeployDetail({ id: this.$route.query.id });
      if (res && res.data) {
        this.detailData = res.data;
      }
      console.log('.............')
      console.log(this.detailData)
      this.genUrl()
    },
    // updateBase() {
    //   this.showUpdateBaseDialog = true
    // },

    // commitBase() {
    //   this.$refs.form.validate(async (valid) => {
    //     if (valid) {
    //       let res = await putGameTaskVersion(this.taskForm);
    //       if (res && res.data) {
    //         this.getDetail()
    //         this.showUpdateBaseDialog = false
    //       }
    //     }
    //   })
    // },
    // cancelBase() {
    //   this.showUpdateBaseDialog = false
    // },

    goToLink() {
      let path = this.podUrl;
      if (this.podUrl == null) {
        alert('仿真前端地址解析失败, 请在刷新页面后重试')
      }
      window.open(path, '_blank');
    },
    genUrl() {
      if (this.detailData.status != 'running' && this.detailData.tcp_port_list && this.detailData.tcp_port_list.length != 0) {
        return null;
      }
      let tcp_port_list = this.detailData.tcp_port_list
      let simulationFrontUrl = process.env.VUE_APP_SIMULATION_URL;
      let nodePort4000 = tcp_port_list && tcp_port_list.filter(map => map.containerPort == '4000')[0].nodePort;
      let nodePort4001 = tcp_port_list && tcp_port_list.filter(map => map.containerPort == '4001')[0].nodePort;
      let endpoint = tcp_port_list && tcp_port_list[0].endpoint.split(':')[0];
      let url = `${simulationFrontUrl}/#/Menu?IP=${endpoint}&port1=${nodePort4000}&port2=4001&port3=${nodePort4001}`;
      this.podUrl = url;
    },
    start() {
      startGameTaskVersion({ id: this.detailData.id });
    },
    async stop() {
      await stopGameTaskVersion({ id: this.detailData.id });
      this.getDetail()
      this.$forceUpdate()
    }
  },
  mounted() {
    let temp = this.$router.options.routes.filter(
      e => e.name == 'gameModelTest' && e.children
    )
    this.thisRouter = temp[0].children.filter(e => !e.meta.hideDetails)
    this.getDetail()
    this.$EventBus.$on('task', e => {
      console.log(e)
      this.getDetail()
    })
  },
  destroyed() {
    this.$EventBus.$off('task')
  },
  components: {
    plugState
  },
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/detail-layout.less";
</style>
